<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .img{
            width: 200px;
            height: 200px;
            background-image: url('./蔡徐坤.webp');
            position: relative;
        }
        .img .mask{
            width: 50px;
            height: 50px;
            left:0px;
            top:0px;
            background-color: rgba(127, 255, 212, 0.352);
            position: absolute;
        }
        .Enlarge{
            width: 100px;
            height: 100px;
            background-image: url('./蔡徐坤大图.png');
            background-repeat: no-repeat;
            background-position: 0 0; 
            /* 图片定位，可以用来调它的位置。0 0就表示他的位置在左上角 */
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="img">
            <div class="mask"></div>
        </div>
        <div class="Enlarge"></div>
    </div>

    <script>
        // 1 获取左侧图片
        let imgObj = document.querySelector('.box .img')
        // 2 绑定鼠标移动事件
        imgObj.onmousemove = function(evt) {
            // 3 事件处理函数中：遮罩框动，放大镜跟着动
            // - 3.1 获取事件对象
            let e = evt || window.event
            // - 3.2 遮罩框动，距离公式：鼠标到网页左边（上边）距离-大盒子到网页左边（上边）的距离-自身宽度（高度）的一半
            let boxObj = document.querySelector('.box')
            let maskObj = document.querySelector('.mask')
            let left = e.pageX - boxObj.offsetLeft - maskObj.offsetWidth/2
            let top = e.pageY - boxObj.offsetTop - maskObj.offsetHeight/2
            maskObj.style.left = left + 'px'
            maskObj.style.top = top + 'px'
            // - 3.3 放大镜跟着动：3.2的距离*2  
            let EnlargeObj= document.querySelector('.Enlarge')
            EnlargeObj.style.backgroundPosition = `-${left*2}px -${top*2}px`
    }
    </script>
</body>
</html>